<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>日历</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /* height: 20000px; */
        }

        li {
            list-style-type: none;
        }

        #header {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 40px;
            background-color: #666;
            color: #fff;
            text-align: center;
            line-height: 40px;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 20;
        }

        #header button {
            width: 100px;
            height: 100%;
            flex-shrink: 1;
        }

        #list {
            position: relative;
            top: 40px;
            overflow: hidden;
        }

        #list .list_user p {
            background-color: #ccc;
            padding-left: 10px;
        }

        #list .list_user ul li {
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #ccc;
            padding-left: 10px;
        }

        #list .list_index {
            position: fixed;
            right: 10px;
            top: 50%;
            font-size: 20px;
        }

        #list .list_index li {
            margin: 5px 0;
        }

        #alert {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .6);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 20;
            display: flex;
            /* justify-content: center; */
            display: none;
        }

        #alert .alert_content {
            width: 200px;
            height: 150px;
            background-color: #fff;
            border-radius: 5px;
            margin: auto;
            /* align-items: center; */
            position: relative;
        }

        #alert .alert_title {
            padding: 10px;
            border-bottom: 1px #ccc solid;
        }

        #alert .alert_body {
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

        #alert .alert_btn {
            position: absolute;
            right: 0;
            bottom: 0;
        }

        .alert_btn botton {
            margin: 10px;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div id="app">

        <my-header custom-title="通讯录" custom-fixed>
            <button slot="left">返回</button>
            <button slot="right">主页</button>
        </my-header>
        <my-list :user-data="userData"></my-list>
        <my-alert custom-title="呼叫">
            <div class="alert_btn">
                <button @touchstart="confimBtn">确认</button>
                <button @touchstart="canceBtn">取消</button>
            </div>
        </my-alert>
    </div>
</body>

</html>
<script src="./vue.js"></script>

<script>
    var userData = [
        {
            "index": "A", "users": [
                { "name": "a1", "tel": "123456789" },
                { "name": "a2", "tel": "123456789" },
                { "name": "a3", "tel": "123456789" },
                { "name": "a4", "tel": "123456789" },
                { "name": "a5", "tel": "123456789" },
                { "name": "a6", "tel": "123456789" }
            ]
        },
        {
            "index": "B", "users": [
                { "name": "b1", "tel": "123456789" },
                { "name": "b2", "tel": "123456789" },
                { "name": "b3", "tel": "123456789" },
                { "name": "b4", "tel": "123456789" },
                { "name": "b5", "tel": "123456789" },
                { "name": "b6", "tel": "123456789" }
            ]
        },
        {
            "index": "C", "users": [
                { "name": "c1", "tel": "123456789" },
                { "name": "c2", "tel": "123456789" },
                { "name": "c3", "tel": "123456789" },
                { "name": "c4", "tel": "123456789" },
                { "name": "c5", "tel": "123456789" },
                { "name": "c6", "tel": "123456789" }
            ]
        },
        {
            "index": "D", "users": [
                { "name": "d1", "tel": "123456789" },
                { "name": "d2", "tel": "123456789" },
                { "name": "d3", "tel": "123456789" },
                { "name": "d4", "tel": "123456789" },
                { "name": "d5", "tel": "123456789" },
                { "name": "d6", "tel": "123456789" }
            ]
        },
        {
            "index": "E", "users": [
                { "name": "e1", "tel": "123456789" },
                { "name": "e2", "tel": "123456789" },
                { "name": "e3", "tel": "123456789" },
                { "name": "e4", "tel": "123456789" },
                { "name": "e5", "tel": "123456789" },
                { "name": "e6", "tel": "123456789" }
            ]
        },
        {
            "index": "F", "users": [
                { "name": "f1", "tel": "123456789" },
                { "name": "f2", "tel": "123456789" },
                { "name": "f3", "tel": "123456789" },
                { "name": "f4", "tel": "123456789" },
                { "name": "f5", "tel": "123456789" },
                { "name": "f6", "tel": "123456789" }
            ]
        },
        {
            "index": "G", "users": [
                { "name": "g1", "tel": "123456789" },
                { "name": "g2", "tel": "123456789" },
                { "name": "g3", "tel": "123456789" },
                { "name": "g4", "tel": "123456789" },
                { "name": "g5", "tel": "123456789" },
                { "name": "g6", "tel": "123456789" }
            ]
        },
    ];
    var busVM = new Vue();
    // < slot name = "left" ></solt>
    Vue.component('my-header', {
        template: `<div id='header' :style="{'positon':'customFixed' ? 'fixed' : 'absolute'}">
                        
                        <button slot="left">返回</button>
                        {{customTitle}}
                        <button slot="right">主页</button>
                  </div>`,

        props: {
            'customTitle': {
                type: String,
                default: '标题'
            },
            'customFixed': {
                type: Boolean,
                default: false
            }
        }
    });
    Vue.component('my-list', {
        template: `
                <div id="list">
            <ul class="list_user" ref="listUser" @touchmove="bMove=true">
                <li v-for="(item, index) in userData">
                    <p>{{item.index}}</p>
                    <ul>
                        <li v-for="(item, index) in item.users" @touchend="showTel(item.tel)">{{item.name}}</li>
                    </ul>
                </li>
            </ul>
            <ul class="list_index" ref="listIndex">
                <li @touchstart="setScroll" v-for="(item, index) in userIndex">{{item}}</li>
            </ul>
        </div>
        `,

        props: {
            'user-data': {
                type: Array,
                default: function () {
                    return [];
                }
            }
        },
        data : function(){
            return {
                bMove : false
            }
        },
        computed: {
            userIndex: function () {
                return this.filterIndex(userData);
            }
        },
        methods: {
            filterIndex: function (data) {
                var result = [];
                data.forEach((ele) => {
                    if (ele.index) {
                        result.push(ele.index)
                    }
                });
                return result;
            },
            setListIndexPos: function () {
                // var iH = this.$refs.listIndex.offsetHight;
                // console.log(iH)
                // this.$refs.$refs.listIndex.style.marginTop = -iH / 2 + 'px';
            },
            setScroll: function (ev) {
                // console.log(ev.target.innerHTML)
                ev.target.innerHTML;
                var ap = this.$refs.listUser.getElementsByTagName('p');
                // console.log(ap)
                for (let i = 0; i < ap.length; i++) {
                    if (ap[i].innerHTML == ev.target.innerHTML) {
                        // console.log(document.body.scrollTop)
                        document.body.scrollTop = ap[i].offsetTop + 'px';
                        // console.log(ap[i].offsetTop)
                    }

                }
            },
            showTel: function (tel) {
                if(!this.bMove){
                    
                    busVM.$emit('changeEvent', tel);
                }else{
                    this.bMove = false;
                }
            }
        },
        mounted: function () {

            this.setListIndexPos();
        }
    });
    Vue.component('my-alert', {
        template: `<div id="alert" ref="alert">
                        <div class="alert_content">
                            <div class="alsrt_title">{{customTitle}}</div>
                            <div class="alert_body">{{customBody}}</div>
                                <slot></slot>
                        </div>
                    </div>`
        ,
            data: function(){
                return {
                    'customBody' : ''
                };
            },
        props: {
            'customTitle': {
                type: String,
                default: '弹窗'
            }
        },
        computed: {

        },
        methods: {
            
        },
        mounted: function () {
            busVM.$on('changeEvent', function(tel){
                console.log(tel);
                this.customBody = tel;
                this.$refs.alert.style.display = 'flex';
            }.bind(this));
        }
    })
    new Vue({
        el: '#app',
        data: {
            userData: userData
        },
        methods:{
            canceBtn : function(){
                console.log("123")
                this.$children[2].$el.style.display = 'none';
            },
            confimBtn: function () { 
                // console.log('345')
                
            },
        }

    })
</script>